製作滾動視差的動畫，使用 javascript 來製作是最為方便的！同時也可以找一些有人寫好的套件，就可以輕鬆製作不用學太多語法。

今天介紹一個可以快速使用的套件

AOS.js Animate On Scroll Library

在需要增加效果的 div 裡加入規定的效果名稱，在 javascript 裡呼叫 AOS 且能視情況設定參數，這邊簡單介紹一下：

效果名稱要放在 data-aos 裡

效果名稱可以包涵效果、方向

效果

• fade 淡入淡出
• flip 折疊式
• zoom-in 放大進場
• zoom-out 縮小進場

方向

• up、down、right、left
  上下左右
• up-right、up-left
  往右上、往左上
• down-right、down-left
  往右下、往左下

範例

<div data-aos="fade-down"></div>
<div data-aos="fade-up-right"></div>

fade-down 表示滑動進入這個區塊時會往下淡入，
fade-up-right 表示滑動進入這個區塊時會往右上方淡入。

動畫持續時間放在 data-aos-duration

1000為一秒，不需要加上單位

範例

<div data-aos="fade-left" data-aos-duration="3000">
</div>

這個區塊會往左進入，從開始進入到完成會花 3 秒時間。

過某區塊，指定物件的動態使用 data-aos-anchor

在滑入的物件加上 id，當此物件滑過離開畫面時，會使data-aos-anchor 跟其 id 名稱一樣的物件實行物件的動畫效果。
另外可以使用 data-aos-anchor-placement 來決定滑到哪觸發及消失

範例

<div class=""
     data-aos="fade-right"
     data-aos-anchor="#triggerAnchor"
     data-aos-anchor-placement="top-bottom">
  Anchor
</div>
<div class="" id="triggerAnchor">Go</div>

當滑到 Go 的時候，會觸發 data-aos-anchor 等於 Go 的 id 的物件，也就是 Anchor那一塊。
top-bottom 會在滑到上方時觸發，滑到底部再收回，也就是 Go 滑到了上方，Anchor 會從右邊淡入，然後 Go 再滑到底部時，Anchor 會再反方向收回，也就是往左邊淡出。

以上是簡單讓物件隨著滾輪跟動的方法，事實上滾動視差可以有更深入更不一樣的設計。綜合AOS的功能並熟悉更多參數設定，也能讓網站活潑起來，產生不一樣的視覺效果！
以下附上 AOS 貼心的範例

AOS Demo：https://michalsnik.github.io/aos/

AOS github：https://github.com/michalsnik/aos

不只一個套件可以製作滾動視差效果，還有其他各式各樣能做出不同效果的好套件，大家可以多多嘗試！